import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible'
import { Image, NavBar, Form, Field, Button, Toast, TabbarItem, Tabbar, Tab, Tabs, Icon, Cell, List, PullRefresh, ActionSheet, Popup, Badge, Row, Col, Search, Divider, Tag, CellGroup } from 'vant'

// 引入自动聚焦 指令 对象
import directiveObj from './utils/directive'
// 全局注册

Vue.use(Image)
Vue.use(CellGroup)
Vue.use(Tag)
Vue.use(Divider)
Vue.use(directiveObj)
Vue.use(Search)
Vue.use(Badge)
Vue.use(Col)
Vue.use(Row)
Vue.use(Popup)
Vue.use(ActionSheet)
Vue.use(PullRefresh)
Vue.use(List)
// 按需导入

// 全局注册
Vue.use(Button)

Vue.use(NavBar)

Vue.use(Form)
Vue.use(Field)
Vue.use(Toast)
Vue.use(Icon)
Vue.use(TabbarItem)
Vue.use(Tabbar)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Cell)

// 全局注册 button 组件
// Vue.use() 中间件函数，调用（）里对象的install方法
// install方法里 vue.component('van-button',组件内对象)

// 方法1：直接在main.js 定义 自动聚焦方法
// 方法2：封装全局指令----函数，导出函数，注册使用
// 1、directive()全局指令的方法---全局注册
/*
Vue.directive('fofo', {
  // inserted --- 配置对象---指令所在的标签，插入到真实DOM 时，才触发
  inserted (el) {
    // console.log(el)   //el 是原生的div标签
    // van-search 组件封装的一套div里面包含 input 标签，往里面获取到input
    // js 触发标签事件 ： .事件名()
    el.querySelector('input').focus()
    // 从当前DOM对象el直接获取标签。 document.querySelector('标签选择器')
  }
})
*/

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
